<script setup>
import { ref, onMounted } from "vue";
<<<<<<< HEAD
import { get } from "@/request/index.js";
import TnSwiper from "@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue";
import { reactive } from "vue";
=======
import { get, post } from "@/request/index.js";
import TnSwiper from "@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue";
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7

onMounted(() => {
  fetchData();
  banner();
});
<<<<<<< HEAD

//十个导航选项的地址
function fetchData() {
  get("default/index", {
    success: (res) => {
    },
=======
//十个导航选项的地址
function fetchData() {
  get("default/index", {
    success: (res) => {},
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
  })
    .then((response) => {
      const data = response.data.data;
      console.log("data", data);
      navIconlist.value = data.nav_icon_list;
    })
<<<<<<< HEAD
    .catch((err) => {
    });
}

=======
    .catch((err) => {});
}
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
// 轮播图数据
const currentSwiperIndex = ref(0);
const swiperData = [
  "https://apphoshna.c8plus.net/web/uploads/image/store_1_0/4df88908849c1bacb2d0f557fcf599dee428d926.jpg",
  ,
];
<<<<<<< HEAD
const navIconlist = ref({});
=======
const navIconlist = ref([]);
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
// 中间的广告栏、因此找不到API地址我用了链接方式
const adList = [
  "https://apphoshna.c8plus.net/web/uploads/image/store_1_0/189a0aa1834c6121b74495fb02f9947900aeaa17.gif",
];

function banner() {
  get("group/index/index", {
<<<<<<< HEAD
    success: (res) => {
    },
=======
    success: (res) => {},
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
  })
    .then((response) => {
      const data = response.data.data;
      console.log("banner", data);
<<<<<<< HEAD
      coverSwiperdata.value = data.banner;
    })
    .catch((err) => {
    });
}

const coverSwiperdata = ref({});

const fruits = [
  { name: '果品水果', title: "果品水果", image: '/static/image/moon.png' },
  { name: '新鲜蔬菜', title: "新鲜蔬菜", image: '/static/image/moon.png' },
  { name: '粮油调料', title: "粮油调料", image: '/static/image/moon.png' },
  { name: '新鲜肉类', title: "新鲜肉类", image: '/static/image/moon.png' },
];
const selectedFruit = ref(-1);
function selectFruit(index) {
  selectedFruit.value = selectedFruit.value === index ? -1 : index;
}

const leftBannerList = ref([
  { img: "https://resource.tuniaokj.com/images/swiper/autumn.jpg" },
  { img: "https://resource.tuniaokj.com/images/swiper/winter.jpg" },
  { img: "https://resource.tuniaokj.com/images/swiper/spring.jpg" },
]);
const rightBannerList = ref([
  {
    top: {
      name: "12W充电器",
      price: "24.99",
      img: "https://resource.tuniaokj.com/images/swiper/autumn.jpg",
    },
    bottom: {
      name: "20W充电器",
      price: "26.99",
      img: "https://resource.tuniaokj.com/images/swiper/autumn.jpg",
    },
  },
  {
    top: {
      name: "12W充电器",
      price: "24.99",
      img: "https://resource.tuniaokj.com/images/swiper/winter.jpg",
    },
    bottom: {
      name: "20W充电器",
      price: "26.99",
      img: "https://resource.tuniaokj.com/images/swiper/winter.jpg",
    },
  },
  {
    top: {
      name: "15W充电器",
      price: "29.99",
      img: "https://resource.tuniaokj.com/images/swiper/spring.jpg",
    },
    bottom: {
      name: "26W充电器",
      price: "14.99",
      img: "https://resource.tuniaokj.com/images/swiper/spring.jpg",
    },
  },
]);
=======
    })
    .catch((err) => {});
}
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
</script>
<template>
  <view class="app">
    <!-- swiper -->
    <view class="SwiperBox">
<<<<<<< HEAD
      <TnSwiper v-model="currentSwiperIndex" :data="swiperData" height="344" width="694" indicator>
=======
      <TnSwiper
        v-model="currentSwiperIndex"
        :data="swiperData"
        height="344"
        width="694"
        indicator
      >
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
        <template #default="{ data }">
          <view class="swiper-data">
            <image :src="data" class="image" mode="aspectFill" />
          </view>
        </template>
      </TnSwiper>
    </view>
    <view class="selectBox">
      <template v-for="(item, index) in navIconlist" :key="index">
        <view class="selectbox">
          <image :src="item.pic_url" class="img" />
          <view class="name">
            {{ item.name }}
          </view>
        </view>
      </template>
    </view>
    <view class="gifimg">
      <image :src="adList" />
    </view>
    <view class="hengxian">
      <view class="left">
        <view class="leftone"></view>
        <view class="leftt"></view>
        <view class="leftth"></view>
      </view>
      <view class="cont">每日火爆团购</view>
      <view class="left">
        <view class="leftth"></view>
        <view class="leftt"></view>
        <view class="leftone"></view>
      </view>
    </view>
<<<<<<< HEAD
    <view class="tswiperBox">
      <view class="twoswiper">
        <TnSwiper :data="coverSwiperdata" height="450" width="360" autoplay loop interval="3000">
          <template #default="{ data }">
            <view class="swiper-data">
              <image :src="data.pic_url" class="image" mode="aspectFill" />
            </view>
          </template>
        </TnSwiper>
      </view>
      <view class="goodsswiper">
        <view class="banner-left">
          <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000">
            <swiper-item class="swiperItem" v-for="(item, index) in leftBannerList" :key="index">
              <image :mode="widthFix" class="banner-image"></image>
            </swiper-item>
          </swiper>
        </view>
        <view class="banner-right">
          <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000">
            <swiper-item class="swiperItem" v-for="(item, index) in rightBannerList" :key="index">
              <view class="item">
                <view class="iTop">
                  <view class="info">
                    <view class="title">{{ item.top.name }}</view>
                    <view class="pInfo">低至
                      <text class="price">{{ item.top.price }}</text>
                      元起
                    </view>
                  </view>
                  <image :class="cover"></image>
                </view>
                <view class="iBottom">
                  <view class="info">
                    <view class="title">{{ item.bottom.name }}</view>
                    <view class="pInfo">低至
                      <text class="price">{{ item.bottom.price }}</text>
                      元起
                    </view>
                  </view>
                  <image :class="cover"></image>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <view>
      <view class="hengxian">
        <view class="left">
          <view class="leftone"></view>
          <view class="leftt"></view>
          <view class="leftth"></view>
        </view>
        <view class="cont">本社区火爆商品</view>
        <view class="left">
          <view class="leftth"></view>
          <view class="leftt"></view>
          <view class="leftone"></view>
        </view>
      </view>
    </view>
    <view class="comsh">
      <view class="comtitle" v-for="(item, index) in fruits" :key="index" @click="selectFruit(index)"
        :class="{ active: selectedFruit === index }">
        <view
          :style="{ color: selectedFruit === index ? '#ff1929' : '#333', fontSize: selectedFruit === index ? '34rpx' : '32rpx' }">
          {{ item.name }}
        </view>
        <view class="fruit-name"
          :style="{ color: selectedFruit === index ? '#ff1929' : '#999', fontSize: selectedFruit === index ? '24rpx' : '24rpx' }">
          {{ item.title }}
        </view>
        <image class="cimg" v-if="selectedFruit === index"
          :style="{ width: selectedFruit === index ? '60rpx' : '', height: selectedFruit === index ? '24rpx' : '' }"
          :src="item.image" />
      </view>
    </view>
    <view class="hengxian">
      <view class="left">
        <view class="leftone"></view>
        <view class="leftt"></view>
        <view class="leftth"></view>
      </view>
      <view class="cont">团长推出新品团购</view>
      <view class="left">
        <view class="leftth"></view>
        <view class="leftt"></view>
        <view class="leftone"></view>
      </view>
    </view>
    <view class="hengxian">
      <view class="left">
        <view class="leftone"></view>
        <view class="leftt"></view>
        <view class="leftth"></view>
      </view>
      <view class="cont">大品牌推出商品</view>
      <view class="left">
        <view class="leftth"></view>
        <view class="leftt"></view>
        <view class="leftone"></view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.app {
  .SwiperBox {
    padding: 28rpx;

    .swiper-data {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;

      .image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
  }

  .selectBox {
    width: 100%;
    height: 360rpx;
    background: #fff;
    border-radius: 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .selectbox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .img {
        width: 100rpx;
        height: 100rpx;
        margin: 25rpx;
      }

      .name {
        margin-top: -20rpx;
        font-size: 14px;
        color: #333;
      }
    }
  }

  .gifimg {
    margin-top: 20rpx;
    width: 100%;
    height: 170rpx;
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .hengxian {
    margin-top: 10rpx;
    height: 48rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
      display: flex;
      justify-content: center;
      align-items: center;

      .leftone {
        margin: 0 6rpx 0 0;
        height: 16rpx;
        width: 8rpx;
        background: #fa4f516e;
      }

      .leftt {
        margin: 0 6rpx 0 0;
        height: 24rpx;
        width: 8rpx;
        background: #fa4f51bb;
      }

      .leftth {
        margin: 0 6rpx 0 0;
        width: 8rpx;
        height: 32rpx;
        background: #fa4f51eb;
      }
    }

    .cont {
      font-size: 27rpx;
      color: #212121;
      padding: 0 12rpx;
    }
  }

  .tswiperBox {
    display: flex;

    .twoswiper {
      margin: 10rpx;

      .swiper-data {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;

        .image {
          width: 100%;
          height: 100%;
          border-radius: inherit;
        }
      }
    }

    .goodsswiper {
      margin: 10rpx;
      width: 350rpx;
      height: 450rpx;
      background: #ea326b;

    }
  }


  .comsh {
    padding: 10rpx;
    width: 100%;
    height: 130rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;

    .comtitle {
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }

=======
    <view class="SwiperBox">
      <TnSwiper
        v-model="currentSwiperIndext"
        :data="swiperData"
        height="450"
        width="360"
        indicator
      >
        <template #default="{ data }">
          <view class="swiper-data">
            <image :src="data" class="image" mode="aspectFill" />
          </view>
        </template>
      </TnSwiper>
    </view>
    <view> 123 </view>
  </view>
</template>
<style lang="scss" scoped>
.SwiperBox {
  padding: 28rpx;

  .swiper-data {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;

    .image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }
}

.selectBox {
  width: 100%;
  height: 360rpx;
  background: #fff;
  border-radius: 10rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .selectbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .img {
      width: 100rpx;
      height: 100rpx;
      margin: 25rpx;
    }

    .name {
      margin-top: -20rpx;
      font-size: 14px;
      color: #333;
    }
  }
}

.gifimg {
  margin-top: 20rpx;
  width: 100%;
  height: 170rpx;
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}
.hengxian {
  margin-top: 10rpx;
  height: 48rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    .leftone {
      margin: 0 6rpx 0 0;
      height: 16rpx;
      width: 8rpx;
      background: #fa4f516e;
    }
    .leftt {
      margin: 0 6rpx 0 0;
      height: 24rpx;
      width: 8rpx;
      background: #fa4f51bb;
    }
    .leftth {
      margin: 0 6rpx 0 0;
      width: 8rpx;
      height: 32rpx;
      background: #fa4f51eb;
    }
  }
  .cont {
    font-size: 27rpx;
    color: #212121;
    padding: 0 12rpx;
  }
}
.twoswiper {
  margin: 20rpx 0 20rpx 0;
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
}
</style>
